<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-tag>
          {{id}}
        </el-tag>

        <el-descriptions class="margin-top" title="线索跟进" :column="3"  border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              创建时间
            </template>
            {{form.createTime}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{form.phone}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              渠道来源
            </template>
            {{functions(form.channel)}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              线索归属
            </template>
            {{form.owner}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              活动信息
            </template>
            {{form.info}}
          </el-descriptions-item>
        </el-descriptions>
        <el-button v-if="(form.status==1 || form.status==2) && form.falseCount<3" type="danger" @click="hanldeFalse">伪线索</el-button>
            <el-button v-if="form.status==1 || form.status==2" type="success" @click="handleTansForm">转商机</el-button>
        <el-divider></el-divider>
        <el-form ref="form" :disabled="disabled" :model="form" :rules="rules" label-width="110px" title="添加跟进">
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="客户姓名" prop="name">
                <el-input v-model="form.name" type="textarea" placeholder="请输入客户姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" placeholder="请输入性别">
                  <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>


          </el-row>

          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="form.age" type="number" placeholder="请输入年龄" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信号" prop="weixin">
                <el-input v-model="form.weixin"  placeholder="请输入微信号" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="qq号" prop="qq">
                <el-input v-model="form.qq" placeholder="请输入qq号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">

              <el-form-item label="意向等级" prop="level">
                <el-select v-model="form.level" placeholder="请输入意向等级">
                  <el-option v-for="item in dict.type.clues_level" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="意向学科" prop="subject">
                <el-select v-model="form.subject" placeholder="请输入意向学科">
                  <el-option v-for="item in dict.type.course_subject" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下次跟进时间" prop="nextTime">
                <el-date-picker
                  v-model="form.nextTime"
                  type="datetime"
                  placeholder="请选择下次跟进时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="跟进记录" prop="record">
                <el-input v-model="form.record" type="textarea" placeholder="请输入跟进记录" />
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
          <el-row>
            <el-col :offset="16" :span="8">
                <el-button v-if="(form.status==1 || form.status==2) && !disabled" type="primary" @click="submitForm">保存</el-button>
                <el-button type="primary" @click="$emit('cancel')">取消</el-button>
            </el-col>
          </el-row>
      </el-col>
      <el-col :span="8">
      <track-list ref="trackList" :id="id" :key="tracklistKey"></track-list>
      </el-col>
 </el-row>
  <false-clue ref="falseClueDialog" @success="tracklistKey++" @ok="handleok"></false-clue>
</div>

</template>

<script>
  import { getClue } from '@/api/crm/clue'
import { addClueTrack ,transformBusiness} from '@/api/crm/cluetrack'
  import TrackList from '@/views/crm/clue/components/tracklist'
  import falseClue from '@/views/crm/clue/components/false-clue'
    export default {
        name: "track-index",
      props:{
          clueId:{
            type:[String,Number]
          },
        view:{type:Boolean}
      },
      components:{TrackList,falseClue},
      dicts:['clues_item','channel_type','sys_user_sex','clues_level','course_subject'],
      data(){
          return{
            id:this.clueId,
            form:{},
            rules:{},
            tracklistKey:0

          }
      },
      //监控值变化 线索更新记录
      watch:{
        clueId(newValue,oldValue){
          this.id=newValue
          this.getList()
        },
        //监控view 是查看还是跟进
        view:{
          handler:function (newValue,oldValue) {
            this.disabled=newValue;
            console.log(newValue)
          },
          //第一次变化就触发
          immediate:true
        }
      },
      created() {
        this.getList()
          },
      methods: {
        getList() {
          getClue(this.id).then(resp => {
            this.form = resp.data;
          })
          this.tracklistKey++;
        },
        submitForm() {
          addClueTrack(this.form).then(resp => {
            this.$message.success('操作成功')
            this.getList();
            this.$emit('ok')

          })
        },
        hanldeFalse() {
          this.$refs.falseClueDialog.open = true
          this.$refs.falseClueDialog.id = this.id;
          this.$refs.falseClueDialog.restForm();
        },
        handleTansForm() {
          transformBusiness(this.form).then(() => {
            this.$message.success('操作成功');
            this.$emit("ok")
          })
        },
        handleok() {
          this.getList()
          this.$emit("ok")
        },
        functions(channel){
          return this.selectDictLabel(this.dict.type.clues_item,channel);
        }
      }
    }
</script>

<style scoped>

</style>
